import React, { useEffect, useReducer, useState } from 'react';
import '../../../scss/fp/callectshopping.scss'
import { Input , Button , Drawer , Checkbox, Form } from 'antd';
import { useCallectshopping } from "../../../hooks/fpHooks/index";
import { Table , Modal } from 'antd';
import { callect_search , callect_data } from "../../../tools/api";
import { message } from "antd";
import axios from 'axios';

const data = [ ];

function Callectshopping(props) {
    const { Search } = Input;
    
    const columns = [
      {
        title: '选择',
        dataIndex: 'shuxing',
        key: 'name',
        align: 'center' ,
        render: (text) =>  <input type="checkbox" />,
      },
      {
        title: '属性组名称',
        dataIndex: 'shuxing',
        key: 'name',
        align: 'center' ,
      //   render: (text) => <a>{text}</a>,
      },
      {
        title: '包含属性',
        dataIndex: 'baohan',
        key: 'age',
        align: 'center' ,
        responsive: ['md'],
      },
      {
        title: '操作',
        dataIndex: 'address',
        key: 'address',
        align: 'center',
        render: (_, record) => (
          <>
              <button className='btnn1' onClick={ () => { callectData(record) } }>编辑</button>
              <button className='btnn2' onClick={ () => { deleteData(record) } }>删除</button>
          </>
        ),
      },
    ];

    var [ data , setData ] = useCallectshopping([]);

      // 删除某一条数据
      const deleteData = ( record ) => {
      //-----🍌---🍌---🍌-----
      callect_data( record.id ).then(
          response => {
              console.log( response.data ) 
              message.open({ type: 'success', content: '删除成功!' });
              shoAi()
          }
      )
  }
  
    // 搜索打印输入框内的 value 值    并且完成表格重新渲染
    const onSearch = ( searchData ) => {
        // console.log(searchData);
        
        callect_search( searchData ).then(
            response => { console.log( response.data ) 
                setData(response.data)
                message.open({ type: 'info', content: '搜索到以下结果!' });

            }
       )

    };

    //*-------------------------------------------☃️-----唤起右侧编辑栏-----☃️-------------------------------------------
    const [open, setOpen] = useState(false);
    
    const showDrawer = () => {
      setOpen(true);
    };
    
    const onClose = () => {
      setOpen(false);
    };
    //*-------------------------------------------☃️-----唤起右侧编辑栏-----☃️-------------------------------------------

    var [ shuxing , setShuxing ] = useState('')
    var [ baohan , setBaohan ] = useState('')
    var [ id , setId ] = useState()

    // 获取输入框的内容
    const callectData = ( record ) => {
       //-----🍌---🍌---🍌-----
       console.log(record.shuxing);
       setShuxing(record.shuxing)
       setBaohan(record.baohan)
       setId(record.id)
       showDrawer()
    }
    
    // 让组件更新
    const shoAi = () => {
       //-----🍌---🍌---🍌-----
       axios.get('http://localhost:4000/callect').then(
        response => {  
          setData(response.data)
        }
      )  
    }
       
    // 编辑
    const goApi = () => {
      //-----🍌---🍌---🍌-----
      axios.patch(`http://localhost:4000/callect/${id}`,{ shuxing : shuxing , baohan : baohan }).then(
        response => {
            message.open({ type: 'success', content: '编辑成功!' });
            shoAi()
        })
            onClose()
        }

    
    const valueData = (e) => {
       //-----🍌---🍌---🍌-----
       setShuxing(e.target.value)
    }
    const valueData2 = (e) => {
       //-----🍌---🍌---🍌-----
       setBaohan(e.target.value)
    }

    const [open2, setOpen2] = useState(false);

    const showModal = () => {
      setOpen2(true);
    };
    
    
    //*-------------------------------------------☃️-----添加数据的功能代码-----☃️-------------------------------------------
    
    var [ addOne , setAddone ] = useState('')
    var [ addTwo , setAddtwo ] = useState('')
    
    // 将状态进行改变
    const addValueone = (e) => {
      //-----🍌---🍌---🍌-----
      setAddone(e.target.value)
    }
    
    // 将状态进行改变
    const addValuetwo = (e) => {
      //-----🍌---🍌---🍌-----
      setAddtwo(e.target.value)
    }
    
    // 添加数据的功能代码
    const handleOk = () => {
      setOpen2(false);
      axios.post('http://localhost:4000/callect',{ shuxing : addOne , baohan : addTwo }).then(
            response => { 
              message.open({ type: 'success', content: '已添加一条数据!' });
              shoAi()
          }
      )
    };
    
    //*-------------------------------------------☃️-----添加数据的功能代码-----☃️-------------------------------------------
    
    return (
        <div className='bianjishopping'>
            <div className="bianjishopping_top">
                    <Search style={{width:300,marginRight:20}} placeholder="请输入属性组名称" onSearch={onSearch}  />
                    <Button type="primary" onClick={showModal}> 添加 </Button>
            </div>
            <div className="tableee">
                <Table pagination={{pageSize:8}} bordered={ true } className='ta' columns={columns} dataSource={data} />
            </div>
                <Drawer title="编辑" placement="right" onClose={onClose} open={open}>
                     <div className="a">
                          <div className="boxset">
                                <input type="text" onChange={ valueData } value={ shuxing } />
                            </div>
                            <div className="boxset">
                                <input type="text" onChange={ valueData2 } value={ baohan } />
                            </div>
                            <Button type="primary" onClick={ goApi }>点击编辑</Button>
                     </div>
                </Drawer>
       
                <Modal
                  title="Basic Modal"
                  open={open2}
                  onOk={handleOk}
                  okButtonProps={{
                    disabled: false,
                  }}
                  cancelButtonProps={{
                    disabled: false,
                  }}
                >
                <div className='add'><input onChange={ addValueone } value={ addOne } type="text" placeholder='新增属性'/></div>
                <div className='add'><input onChange={ addValuetwo } value={ addTwo } type="text" placeholder='新增包含属性'/></div>
                </Modal>
        </div>
    );
}

export default Callectshopping;